<template>
    <BTable class="tnxbsv-query-table"
        :id="id"
        :items="result.records || []"
        :fields="fields"
        :busy="result.records === null"
    >
        <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
            <slot :name="slot" v-bind="scope"></slot>
        </template>
        <template #custom-foot>
            <tr>
                <td colspan="100%">
                    <Paged :value="result.paged"
                        :query="query"
                        :page-size-changeable="pageSizeChangeable"
                        :aria-controls="id"
                    />
                </td>
            </tr>
        </template>
    </BTable>
</template>

<script>
import {BTable} from 'bootstrap-vue-next';
import Paged from '../paged/Paged.vue';

export default {
    name: 'TnxbsvQueryTable',
    components: {BTable, Paged},
    props: {
        id: {
            type: String,
            default: () => {
                return 'query-table-' + window.tnx.util.string.uuid32();
            },
        },
        url: {
            type: String,
            required: true,
        },
        params: {
            type: Object,
            required: true,
        },
        fields: {
            type: Array,
            required: true,
        },
        init: Boolean,
        pageSizeChangeable: Boolean,
    },
    data() {
        return {
            result: {
                records: null,
                paged: null,
            },
        };
    },
    mounted() {
        if (this.init) {
            this.query();
        }
    },
    methods: {
        query(paging) {
            let params = Object.assign({}, this.params, paging);
            this.result.records = null;
            window.tnx.app.rpc.get(this.url, params).then(result => {
                this.result = result;
            });
        },
    }
}
</script>

<style>
.tnxbsv-query-table th,
.tnxbsv-query-table td {
    vertical-align: middle;
}
</style>
